<script lang="ts">
    import {getGradientColor} from "@/common/util";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";

    export default {
        name: "u-loading-icon",
        // 混合
        mixins: [props, mixin, mpMixin],
        // 数据
        data()
        {
            return {};
        },
        // 计算函数
        computed: {
            // 获取图标的样式
            getWrapperStyle(): Record<string, any>
            {
                const borderStyle: Record<string, any> = {};

                // 圆形样式
                if (this.mode === "circle")
                {
                    borderStyle.borderTopColor = this.color;
                    borderStyle.borderBottomColor = this.getColorGradient;
                    borderStyle.borderLeftColor = this.getColorGradient;
                    borderStyle.borderRightColor = this.getColorGradient;
                }
                // 缺角
                else if (this.mode === "unfilled")
                {
                    borderStyle.borderTopColor = "transparent";
                    borderStyle.borderBottomColor = this.color;
                    borderStyle.borderLeftColor = this.color;
                    borderStyle.borderRightColor = this.color;
                }
                // 半圆
                else if (this.mode === "semicircle")
                {
                    borderStyle.borderTopColor = this.color;
                    borderStyle.borderBottomColor = "transparent";
                    borderStyle.borderLeftColor = "transparent";
                    borderStyle.borderRightColor = "transparent";
                }

                return {
                    width: this.$u.unit(this.size),
                    height: this.$u.unit(this.size),
                    color: this.color,
                    animationDuration: `${this.duration}ms`,
                    animationTimingFunction: ["semicircle", "circle", "unfilled"].includes(this.mode) ? this.timingFunction : this.mode === "spinner" ? "steps(12)" : "",
                    ...borderStyle
                };
            },
            // 获取基于当前颜色进行颜色梯度的计算
            getColorGradient(): string
            {
                if (this.mode === "circle")
                {
                    return getGradientColor(this.color, "#fff", 100)[80];
                }
                else
                {
                    return "transparent";
                }
            }
        }
    };
</script>

<template>
    <!-- loading组件 -->
    <view
        v-if="show"
        :class="[customClass]"
        :style="[customStyle]"
        class="u-loading-icon"
    >
        <!-- 图标 -->
        <view
            :class="[`u-loading-icon-${mode}`]"
            :style="[getWrapperStyle]"
            class="u-loading-icon-wrapper"
        >
            <!-- 花瓣模式 -->
            <view
                v-if="mode === 'spinner'"
                class="spinner-loading"
            >
                <view
                    v-for="item in 12"
                    :key="item"
                    class="spinner-loading-content"
                />
            </view>
            <!-- //花瓣模式 -->
        </view>
        <!-- //图标 -->
    </view>
    <!-- //loading组件 -->
</template>

<style lang="scss" scoped>
    .u-loading-icon
    {
        display: flex;
        align-items: center;
        justify-content: center;

        // 图标
        &-wrapper
        {
            position: relative;
            box-sizing: border-box;
            max-width: 100%;
            max-height: 100%;
            animation-name: circle;
            animation-delay: 0s;
            animation-iteration-count: infinite;
        }

        // 圆形&缺角
        &-semicircle, &-circle, &-unfilled
        {
            border-width: 2px;
            border-style: solid;
            border-radius: 100%;
        }

        // 花瓣
        &-spinner
        {
            .spinner-loading
            {
                position: relative;
                width: 100%;
                height: 100%;

                .spinner-loading-content
                {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    &:before
                    {
                        display: block;
                        width: 2px;
                        height: 25%;
                        margin: 0 auto;
                        content: " ";
                        border-radius: 40%;
                        background-color: currentColor;
                    }
                }

                @for $i from 1 through 12
                {
                    .spinner-loading-content:nth-of-type(#{$i})
                    {
                        transform: rotate($i * 30deg);
                        opacity: 1 - 0.0625 * ($i - 1);
                    }
                }
            }
        }

        // 动画
        @keyframes circle
        {
            0%
            {
                transform: rotate(0);
            }
            100%
            {
                transform: rotate(360deg);
            }
        }
    }
</style>